import 'package:eplorex/pages/health/personanl_health_page.dart';
import 'package:eplorex/pages/my/qrcode_scanner_page.dart';
import 'package:flutter/material.dart';

import '../../dao/user_profile_dao.dart';
import '../../models/activity/common_tab_title_model.dart';
import '../../models/user/UserBaseInfo.dart';
import 'account_setting_page.dart';
import 'creating_page.dart';
import 'module/my_collection_module.dart';
import 'module/my_moment_mudule.dart';
import 'my_edit_profile.dart';

class MyInfoPage extends StatefulWidget {
  @override
  State<MyInfoPage> createState() => _MyInfoPageState();
}

class _MyInfoPageState extends State<MyInfoPage> with TickerProviderStateMixin {
  late TabController _tabController;
  late List<Widget> _tabPages = [];
  late Future<UserBaseInfo> _followModel;
  late List<CommonTabTitle> _tabs = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _followModel = UserProfileDao.queryCurUserProfile();
    _tabPages = [
      MyMomentModule(),
      MyCollectionModule(),
      MyCollectionModule(),
      MyCollectionModule()
    ];
    _tabs.add(CommonTabTitle(labelName: "瞬间", groupChannelCode: "11", type: 1));
    _tabs.add(CommonTabTitle(labelName: "活动", groupChannelCode: "11", type: 1));
    _tabs.add(CommonTabTitle(labelName: "足迹", groupChannelCode: "11", type: 1));
    _tabs.add(CommonTabTitle(labelName: "收藏", groupChannelCode: "11", type: 1));

    try {
      _tabController = TabController(
          length: _tabs.length, vsync: this); // fix tab label 空白问题
      setState(() {});
    } catch (e) {
      print(e);
    }
  }

  Widget getHeader() {
    return Container(
      color: Colors.white,
      height: 320,
      child: FutureBuilder(
        future: _followModel,
        builder: (BuildContext context, AsyncSnapshot<UserBaseInfo> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting ||
              snapshot.connectionState == ConnectionState.done &&
                  snapshot.data == null) {
            return const Center(
              child: Text("loading....."),
            );
          }
          UserBaseInfo model = snapshot.data!;
          // if (_followStat == 0) {
          //   _followStat = (model.relation == 1 || model.relation == 5) ? 1 : 2;
          // }
          return Container(
            // color: Colors.red,
            child: Container(
              margin: EdgeInsets.only(top: 80, left: 10, right: 10, bottom: 10),
              child: Stack(
                children: [
                  Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          child: Flex(
                            direction: Axis.horizontal,
                            children: [
                              CircleAvatar(
                                radius: 40,
                                backgroundImage: NetworkImage(model.avatar!),
                              ),
                              SizedBox(
                                width: 20,
                              ),
                              Container(
                                // height: 60,
                                child: Column(
                                  // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Container(
                                      child: Text(
                                        "账号名称",
                                        style: TextStyle(fontSize: 20),
                                      ),
                                    ),
                                    Container(
                                      child: Row(
                                        // spacing: 10,
                                        children: [
                                          Text(
                                            "账号名称:",
                                            style: TextStyle(fontSize: 16),
                                          ),
                                          Text(
                                            model.userName!,
                                            style: TextStyle(fontSize: 16),
                                          )
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(vertical: 10),
                          child: Text("这是一段很长的自我介绍，多余的部分你是看不到的的呀...."),
                        ),
                        Flex(direction: Axis.horizontal, children: [
                          Expanded(
                            flex: 8,
                            child: Wrap(
                              spacing: 16,
                              children: [
                                Container(
                                  child: Column(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text('${model.fansCnt}',
                                          style: const TextStyle(
                                              fontWeight: FontWeight.w600,
                                              fontSize: 18)),
                                      const Text(
                                        "粉丝",
                                        style: TextStyle(color: Colors.grey),
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  child: Column(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text('${model.followCnt}',
                                          style: const TextStyle(
                                              fontWeight: FontWeight.w600,
                                              fontSize: 18)),
                                      const Text(
                                        "关注",
                                        style: TextStyle(color: Colors.grey),
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  child: const Column(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text("2",
                                          style: TextStyle(
                                              fontWeight: FontWeight.w600,
                                              fontSize: 18)),
                                      Text(
                                        "收藏",
                                        style: TextStyle(color: Colors.grey),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Expanded(
                            flex: 2,
                            child: Container(
                              child: OutlinedButton(
                                style: ButtonStyle(
                                    padding: MaterialStateProperty.all(
                                        EdgeInsets.zero),
                                    minimumSize:
                                        MaterialStateProperty.all(Size(40, 30)),
                                    backgroundColor: MaterialStateProperty.all(
                                        Colors.black12)),
                                onPressed: () {
                                  Navigator.of(context).push(MaterialPageRoute(
                                      builder: (_) => MyEditProfilePage()));
                                },
                                child: const Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Icon(
                                      Icons.edit,
                                      size: 16,
                                    ),
                                    Text("编辑",
                                        style: TextStyle(
                                          color: Colors.black,
                                        ))
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ]),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Wrap(
                            // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            spacing: 8,
                            children: [
                              Image(
                                  height: 16,
                                  width: 16,
                                  color: (model.gender ==1 ? Colors.blue : Colors.pinkAccent),
                                  image:(model.gender ==1 ?
                                  AssetImage('images/gender_male.png')
                                :  AssetImage('images/gender_female.png'))),
                              Container(
                                height: 20,
                                width: 60,
                                child: OutlinedButton(
                                    style: ButtonStyle(
                                        padding: MaterialStateProperty.all(
                                            EdgeInsets.zero)),
                                    onPressed: () {},
                                    child: Text(
                                      "上海普陀",
                                      style: TextStyle(
                                          fontSize: 10,color: Colors.black),
                                    )),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                      child: Row(
                    textDirection: TextDirection.rtl,
                    children: [
                      IconButton(
                          padding: EdgeInsets.zero,
                          style: ButtonStyle(
                              backgroundColor:
                                  MaterialStateProperty.all(Colors.black12)),
                          onPressed: () {
                            Navigator.of(context).push(MaterialPageRoute(
                                builder: (_) => AccountSettingPage()));
                          },
                          icon: const Image(
                            image: AssetImage('images/settings_icon.png'),
                            width: 25,
                          )),
                      IconButton(
                        style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.black12)),
                        padding: EdgeInsets.zero,
                        onPressed: () {
                          Navigator.of(context).push(MaterialPageRoute(
                              builder: (_) => QRCodeScannerPage()));
                        },
                        icon: Image.asset(
                          'assets/scan@2x.png',
                          height: 20,
                          width: 20,
                        ),
                      )
                    ],
                  ))
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Widget getTabModule() {
    return Container(
      color: Colors.white,
      height: 800,
      margin: EdgeInsets.symmetric(horizontal: 5),
      child: Column(
        children: [
          Container(
            color: Colors.white,
            margin: EdgeInsets.only(bottom: 10),
            child: TabBar(
              controller: _tabController,
              labelStyle: TextStyle(fontSize: 18),
              isScrollable: true,
              labelColor: Colors.black,
              tabAlignment: TabAlignment.center,
              labelPadding: EdgeInsets.fromLTRB(15, 0, 10, 5),
              indicator: const UnderlineTabIndicator(
                borderSide: BorderSide(color: Color(0xff1fcfbb), width: 3),
                insets: EdgeInsets.only(bottom: 10),
              ),
              tabs: _tabs.map<Tab>(
                (CommonTabTitle tab) {
                  return Tab(
                    text: tab.labelName,
                  );
                },
              ).toList(),
            ),
          ),
          Flexible(
              child:
                  TabBarView(controller: _tabController, children: _tabPages)),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // color: Colors.red,
        child: MediaQuery.removePadding(
          removeTop: true,
          context: context,
          child: ListView(
            children: [getHeader(), getMid(), getTabModule()],
          ),
        ),
      ),
    );
  }

  Widget getMid() {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(5),
      ),
      padding: EdgeInsets.only(top: 12),
      height: 82,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          GestureDetector(
            onTap: () {
              Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => PersonalHealthPage()));
            },
            child: Column(
              children: [
                Image.asset(
                  'assets/course.png',
                  scale: 0.75,
                ),
                Text("课程")
              ],
            ),
          ),
          Column(
            children: [
              Image.asset(
                'assets/wallet.png',
                scale: 0.75,
              ),
              Text("钱包")
            ],
          ),
          Column(
            children: [
              Image.asset(
                'assets/browsing_history.png',
                scale: 0.75,
              ),
              Text("浏览历史")
            ],
          ),
          GestureDetector(
            onTap: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (_) => CreatorPage()));
            },
            child: Column(
              children: [
                Image.asset(
                  'assets/creating.png',
                  scale: 0.75,
                ),
                Text("创作")
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }
}
